<template>
  <div
    v-loading="loading"
    class="sale-statistics card">
    <flexbox class="card-title">
      <span class="icon wk wk-target" />
      <div class="card-title-center text-one-ellipsis">{{options[value-1].name||'线索统计'}}</div>
      <div class="card-title-right">
        <!--<span class="box">{{ filterText }}</span>
        <span class="box">{{ timeLine }}</span>-->
              <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
            <el-date-picker
      v-model="value1"
      type="year"
      placeholder="选择年" value-format="yyyy">
    </el-date-picker>
            <el-button @click="changeFn" class="ml-20">查询</el-button>

      </div>
    </flexbox>
     <!-- <div class="card-desc">
      近一年的{{ typeName }}目标完成情况柱状图
      <el-button v-if="hasSetAuth" style="margin-left: 8px;" type="text" @click="enterSetPage">设置目标</el-button>
    </div> -->
    <div id="sale-statistics" />
  </div>
</template>

<script>
import { crmQueryStatisticsCurveAPI } from '@/api/crm/workbench'

import echarts from 'echarts'
import ChartMixin from './ChartMixin'
import { mapGetters } from 'vuex'

export default {
  name: 'SaleStatistics',
  mixins: [ChartMixin],
  props:{
 dataForm:{
      type:Number,
      default:false
    },
    deptId:{
      type:String,
      default:false
    }
  },
  data() {
    return {
      radio1:'今日',
      value1:'',
      value:1,
       options: [
        { name: "线索量", value: 1 },
        { name: "报课量", value: 2 },
        { name: "报课率", value: 3 },
        { name: "加好友量", value: 4 },
        { name: "加好友率", value: 5 },
        { name: "加群量", value: 6 },
        { name: "加群率", value: 7 },
        { name: "成交量", value: 8 },
        { name: "成交率", value: 9 },
        { name: "KPI", value: 10 }
      ],
      optionName: '合同金额',
      optionValue: 1,
      chartOption:{
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                type: 'category',
                boundaryGap: false,     //坐标轴两边不留白
                data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1',],
                name: '时间',           //X轴 name
                nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                },
                axisLine: {             //坐标轴轴线相关设置。
                    lineStyle: {
                        color: '#FA6F53',
                    }
                }
            },
            yAxis:{
                type:'value'
            },
            series:[{
                name:'数据源',
                type:'line',
                data:[500,200,360,100]
            }]
        },
      chartObj: null,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['manage']),
    // 目标设置权限
    hasSetAuth() {
      return this.manage && this.manage.crm && this.manage.crm.achievement
    },
    // 类型名字
    typeName() {
      return {
        1: '合同',
        2: '回款'
      }[this.optionValue]
    }
  },
  mounted() {
    this.initChart()
    // 获取默认 optionValue 类型的数据
    // this.getData()
  },
  methods: {
    initChart() {
      this.chartObj = echarts.init(document.getElementById('sale-statistics'))
      this.chartObj.setOption(this.chartOption, true)
    },

    /**
     * 下拉菜单选项选择
     * @param index 选项序号
     */
    handleCommand(index) {
      if (this.optionValue === this.options[index].value) return
      this.optionName = this.options[index].name
      this.optionValue = this.options[index].value
      this.getData()
    },
changeFn(e){
  this.getData()
},
    getData() {
      console.log('执行')
      this.loading = true
      crmQueryStatisticsCurveAPI({
        year:this.value1,
        type:this.value,
        dataForm:this.dataForm==1?'涵品':'有成',
        deptId:this.deptId
      }).then(res => {
        // this.trendData = {
        //   totlaContractMoney: res.data.totlaContractMoney,
        //   totlaReceivablesMoney: res.data.totlaReceivablesMoney
        // }
        const list = res.data.list || []
        // const contractList = []
        // const receivablesList = []
        // const xAxisData = []
        // for (let index = 0; index < list.length; index++) {
        //   const element = list[index]
        //   contractList.push(element.achievement)
        //   receivablesList.push(element.money)
        //   xAxisData.push(element.type)
        // }
        // this.chartOption.xAxis[0].data = xAxisData
        // this.chartOption.series[0].data = contractList
        // this.chartOption.series[1].data = receivablesList
          this.chartOption.series[0].data =res.data.leadsStatistics.values
          this.chartOption.xAxis.data = res.data.leadsStatistics.xAxis
          // this.chartOption.yAxis.data = res.data.leadsStatistics.yAxis
        this.chartObj.setOption(this.chartOption, true)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 进入设置页面
     */
    enterSetPage() {
      this.$router.push({
        name: 'crmBizGoals'
      })
    }
  },
    watch: {
      //观察option的变化
      chartOption: {
        handler(newVal, oldVal) {
          if (this.chartObj) {
            if (newVal) {
              this.chartObj.setOption(newVal);
            } else {
              this.chartObj.setOption(oldVal);
            }
          } else {
            this.initChart();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
      dataForm:{
        handler(newVal, oldVal) {
            if (newVal) {
              this.getData()
            }
        },
        deep: true //对象内部属性的监听，关键。
      },
      deptId:{
        andler(newVal, oldVal) {
            if (newVal) {
              this.getData()
            }
        },
        deep: true //对象内部属性的监听，关键。
      }
    },
}
</script>

<style scoped lang="scss">
  @import "style";
  #sale-statistics {
    width: 100%;
    height: 300px;
  }
</style>
